<template>
  <button
    :open-type="OpenType"
    class="oto-button"
    @click.stop="onClick"
    :style="[customStyle, ...otherStyle]"
    @getphonenumber="getPhoneNumber"
    :disabled="disabled"
  >
    <slot></slot>
  </button>
</template>

<script>
  export default {
    props: {
      OpenType: {
        type: String,
        default: ''
      },
      customStyle: {
        type: Object,
        default() {
          return {};
        }
      },
      otherStyle: {
        type: Array,
        default() {
          return [];
        }
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onClick(e) {
        this.$emit('click', e);
      },
      getPhoneNumber(e) {
        this.$emit('getphonenumber', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-button {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border-radius: 100rpx;
    opacity: 1;
    background: rgba(129, 216, 222, 1);
    // box-shadow: 0 6rpx 10rpx 1rpx rgba(28, 207, 171, 0.12);
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    // line-height: 0;
    &:active {
      opacity: 0.7;
    }
    &::after {
      border: none;
    }
  }
</style>
